<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
</head>

<body>
	<style type="text/css">
	* {
			margin: 0;
			padding: 0;
			list-style: none;
		}

		.cube {
			width: 200px;
			height: 200px;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			transform-style: preserve-3d;
			/*定义该元素下的所有子元素，同属于一个三维空间里*/
		}

		.side {
			position: absolute;
			width: 100%;
			height: 100%;
			line-height: 200px;
			font-size: 100px;
			text-align: center;
			opacity: .7;
		}

		.front {
			transform: translateZ(100px);
			background: skyblue;
		}

		.back {
			transform: rotateY(180deg) translateZ(100px);
			background: red;
		}

		.top {
			transform: rotateX(90deg) translateZ(100px);
			background: yellow;
		}

		.bottom {
			transform: rotateX(-90deg) translateZ(100px);
			background: green;
		}

		.left {
			transform: rotateY(-90deg) translateZ(100px);
			background: salmon;
		}

		.right {
			transform: rotateY(90deg) translateZ(100px);
			background: lavender;
		}

		.cube {
			animation: rotateCube 5s linear infinite;
		}
		.cube:hover{
			animation-play-state: paused;
		}

		@keyframes rotateCube {
			0% {
				transform: rotateX(0deg) rotateY(0) rotateZ(0);
			}

			100% {
				transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
			}
		}
	}
	</style>



	<ul class="cube">
		<li class="side front">1</li>
		<li class="side back">2</li>
		<li class="side left">3</li>
		<li class="side right">4</li>
		<li class="side top">5</li>
		<li class="side bottom">6</li>
	</ul>

	<!-- <style type="text/css">
				.cube2{
					width: 50px;
					height: 50px;
					position: absolute;
					left: 235px;
					right: 0;
					top: 100px;
					bottom: auto;
					transform-style: preserve-3d;
					/* transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(100px); */
					animation: rotateCube2 5s linear infinite;
				}	
				.minfront{
					transform: rotateY(-90deg) translateZ(30px);
					background: skyblue;
				}
				.minfront img{
					width: 50px;
					height: 50px;
				}
				.minback{
					transform: rotateY(90deg) translateZ(30px);
					background: red;
				}
				.minback img{
					width: 50px;
					height: 50px;
				}
				@keyframes rotateCube2{
					from{transform: rotateX(0deg) rotateY(0) rotateZ(0);}
					to{transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg);}
				}
				.side{
					background: #fff;
				}
			</style>
			<ul class="cube2">
				<li class="side minfront"><a href="index.html"><img src="img/LOGO.png" ></a></li>
				<li class="side minback"><a href="index.html"><img src="img/LOGO.png" ></a></li>
			</ul> -->
</body>

</html>
